<template>
    <div class="c-container">
        <c-header></c-header>
        <div class="gotop" @click="gotop">
            <img src="../../assets/img/china/top.png" alt="">
        </div>
        <div class="pic-content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import { picHeader } from '../../components';
    import 'rxjs';
    import { Observable } from 'rxjs/Observable';
    import vp from '../../plugins/assets/js/selector';
    export default {
        name:'home',

        data() {
            return {

            }
        },

        components:{
            cHeader:picHeader
        },

        methods:{
            locationHref(link) {
                this.$router.push(link);
            },

            gotop() {
//                console.log(true);
//                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                document.documentElement.scrollTop = document.body.scrollTop = 500;
            }
        },

        mounted() {
            Observable.fromEvent(document,'scroll')
                .debounceTime(100)
                .subscribe(e => {
//                    console.log(window.pageYOffset);
                    if (window.pageYOffset > 1100) {
                        vp('.gotop').addClass('gotop_show');
                    } else {
                        vp('.gotop').removeClass('gotop_show');
                    }
                })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../plugins/assets/css/flex.less";
    .c-container{
        background:url('../../assets/img/china/big_back.png') 0 0 no-repeat;
        min-height:1500px;
    }
    .vp-back-img{
        position: absolute;
    }
    .c-menu{
        background-color:#B12828;
        height:50px;
        width: 100%;
        &-content{
            width: 50%;
            margin: 0 auto;
            text-align: center;
            li {
                .box-sizing;
                float: left;
                color: #fff;
                font-weight:bold;
                padding: 15px 30px;
                font-size:20px;
                cursor: pointer;
                a {
                    color: #fff;
                    text-decoration: none;
                }
            }
            .li_active {
                background: #941B1B;
            }
        }
    }

    .gotop {
        position: fixed;
        right: 15%;
        bottom: 5%;
        cursor: pointer;
        display: none;
    }

    .gotop_show {
        display: block;
    }

    .pic-content{
        .box-sizing;
        position: relative;
        z-index:5;
        background: url('../../assets/img/china/white.png') 0 0 no-repeat;
        background-size: 100% 100%;
        width: 60%;
        margin: 30px auto;
        min-height:1000px;
        padding: 100px;
    }
    @media screen and (max-width: 768px) {
        .c-container{
            background:url('../../assets/img/china/big_back.png') 0 0 no-repeat;
            min-height:80vh;
        }
        .vp-back-img{
            position: absolute;
        }
        .c-menu{
            background-color:#B12828;
            height:50px;
            width: 100%;
            &-content{
                width: 50%;
                margin: 0 auto;
                text-align: center;
                li {
                    .box-sizing;
                    float: left;
                    color: #fff;
                    font-weight:bold;
                    padding: 2vw 4vw;
                    font-size:20px;
                    cursor: pointer;
                    a {
                        color: #fff;
                        text-decoration: none;
                    }
                }
                .li_active {
                    background: #941B1B;
                }
            }
        }

        .gotop {
            position: fixed;
            right: 5%;
            bottom: 5%;
            cursor: pointer;
            display: none;
            img {
                width: 10vw;
            }
        }

        .gotop_show {
            display: block;
        }

        .pic-content{
            .box-sizing;
            position: relative;
            z-index:5;
            background: url('../../assets/img/china/white.png') 0 0 no-repeat;
            background-size: 100% 100%;
            width: 90%;
            margin: 30px auto;
            min-height:80vh;
            padding: 5vw;
        }
    }
</style>